<script setup lang="ts">
import { ref } from 'vue'
// 定义 props 接收
defineProps<{
  list: string[]
}>()

// 当前激活的轮播图索引
const activeIndex = ref(0)

// 添加swiper变化事件处理
// 当用户滑动 swiper 时，更新 activeIndex 的值
const onSwiperChange = (e: any) => {
  activeIndex.value = e.detail.current
  // console.log('当前激活的索引:', activeIndex.value)
}
</script>

<script lang="ts">
// 调整组件样式隔离选项	让组件接受外部样式，是推荐的根源解决方法

// H5环境：没有严格的样式隔离，父组件可以通过深度选择器影响子组件的样式。

// 微信小程序：出于性能和代码隔离考虑，自定义组件有默认的样式隔离。
// 这意味着，即便使用了深度选择器，外部样式也可能无法影响组件内部的样式，除非组件明确声明愿意"共享"样式或"应用"外部样式。
// 设置 styleIsolation: 'shared' 就是为了告诉小程序，这个组件愿意接受来自页面或父组样式。
// 新增这个script块来配置组件选项
export default {
  options: {
    styleIsolation: 'shared',
  },
}
</script>

<template>
  <view class="homeLayout">
    <view class="banner">
      <!-- <swiper :circular="true" :autoplay="true" :interval="3000"> -->

      <!-- @change="onSwiperChange" → 滑动时把索引传给 activeIndex
            :current="activeIndex" → activeIndex 变化时控制 swiper 切换
        -->
      <swiper circular autoplay :interval="5000" :current="activeIndex" @change="onSwiperChange">
        <swiper-item v-for="(item, index) in list" :key="index">
          <navigator url="/pages/index/index" hover-class="none" class="like">
            <image mode="aspectFill" class="image" :src="item"></image>
          </navigator>
        </swiper-item>
      </swiper>
    </view>

    <!-- 指示点 -->
    <!-- <view class="indicator">
      <text
        v-for="(item, index) in 4"
        :key="item"
        class="dot"
        :class="{ active: index === activeIndex }"
      ></text>
    </view> -->
    <!-- 指示点 -->
    <view class="indicator">
      <text
        v-for="(item, index) in list"
        :key="index"
        class="dot"
        :class="{ active: index === activeIndex }"
      ></text>
    </view>

    <!-- <view class="notice">
      <view class="left">
        <uni-icons type="sound-filled" size="20"></uni-icons>
        <text class="text">公告</text>
      </view>
      <view class="center">
        <swiper vertical autoplay :interval="3000" :duration="300" circular>
          <swiper-item v-for="item in noticeList" :key="item._id">
            <navigator :url="'/pages/notice/detail?id=' + item._id">
            <navigator url="/pages/index/index">{{ item.title }}</navigator>
          </swiper-item>
        </swiper>
      </view>
      <view class="right">
        <uni-icons type="right" size="16" color="#333"></uni-icons>
      </view>
    </view> -->
  </view>
</template>

<style lang="scss" scoped>
/* 轮播图 */
.homeLayout {
  position: relative; // 添加相对定位，使绝对定位的指示点能正确定位
  // height: 340rpx; // 改为自动高度，不要固定340rpx
  // 宽度100% 相对于父容器，如果父容器宽度固定则没问题，但是如果没有设置就有问题了
  // width: 100%;
  height: auto;
  // width: calc(100% - 20rpx); // 这里设置一个固定宽度
  padding: 0 20rpx; /* 添加水平内边距，与其他组件对齐 */
  padding-bottom: 20rpx; // 添加底部内边距
  border-radius: $brand-border-radius;

  .indicator {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30rpx;
    display: flex;
    justify-content: center;
    z-index: 2;

    .dot {
      width: 30rpx;
      height: 6rpx;
      margin: 0 8rpx;
      border-radius: 6rpx;
      background-color: rgba(255, 255, 255, 0.4);
      transition: background-color 0.3s;
    }

    .active {
      background-color: #fff;
    }
  }

  // 轮播图区域
  .banner {
    width: 100%;
    height: 340rpx; // 给轮播图设置固定高度
    padding-top: 10rpx; /* 添加顶部间距 */
    border-radius: $brand-border-radius;
    overflow: hidden;

    swiper {
      width: 100%;
      height: 100%;
      border-radius: $brand-border-radius;
      overflow: hidden;

      swiper-item {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        border-radius: $brand-border-radius;
        overflow: hidden;

        .like {
          width: calc(100% - 20rpx); /* 减少减去的宽度，让左右更宽 */
          height: 100%;
          margin: 0 10rpx; /* 减少左右margin，让内容区域更宽 */
          border-radius: $brand-border-radius;
          overflow: hidden;

          image {
            width: 100%;
            height: 100%;
            border-radius: $brand-border-radius;
            display: block;
          }
        }
      }
    }
  }

  // 公告区域
  .notice {
    width: calc(100% - 20rpx);
    margin: 0 10rpx; /* 减少左右margin，让内容区域更宽 */
    height: 60rpx;
    line-height: 60rpx;
    background: #f9f9f9;
    margin: 20rpx auto 0; // 添加上边距，与轮播图分开
    border-radius: $brand-border-radius;
    display: flex;

    .left {
      width: 140rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      // 写法一
      :deep() {
        .uni-icons {
          color: $brand-notice-color !important;
        }
      }

      // 写法二
      // :deep(.uni-icons) {
      //   color: red !important;
      // }

      // 写法三 更明确的深度选择器
      // :deep(uni-icons) {
      //   .uni-icons {
      //     color: greenyellow !important;
      //   }
      // }

      .text {
        color: $brand-notice-color;
        font-weight: 600;
        font-size: 28rpx;
        margin-left: 10rpx;
      }
    }

    .center {
      flex: 1;
      height: 100%;
      overflow: hidden;

      swiper {
        height: 100%;

        swiper-item {
          height: 100%;
          display: flex;
          align-items: center;
          font-size: 30rpx;
          color: #666;

          navigator {
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }

    .right {
      width: 70rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
